<template>
  <div class="app-container">
    <div>
      <el-upload
        action="/bs/uploadPhoto"
        list-type="picture-card"
        auto-upload
        multiple
        :data="uploadData"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove">
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </div>
    <div></div>
  </div>
</template>

<script>
  export default {

    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        uploadData: {
          category: 0
        }
      }
    },
    watch: {
      filterText(val) {
        this.$refs.tree2.filter(val)
      }
    },

    methods: {
      filterNode(value, data) {
        if (!value) return true
        return data.label.indexOf(value) !== -1
      },
      handleRemove(file, fileList) {
        console.log(file, fileList)
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      }
    }
  }
</script>

